<template>
<body id="box">
 <el-form :model="loginForm" ref="userFrom"  :rules="rules" class="login" label-position="left" label-width="0px" >
  <div>
 <h2>
        爱辉区流浪猫狗救助平台
    </h2>
  </div>
  <el-form-item size="medium"  prop="userName">
    <el-input type="text" prefix-icon="el-icon-user"  v-model="loginForm.userName" auto-complete="off" placeholder="用户名"></el-input>
  </el-form-item>
   <el-form-item size="medium"   prop="password" >
    <el-input  type="password"  prefix-icon="el-icon-lock" show-password v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
  </el-form-item>
   <div style="position: relative;padding-right: 100px;">
        <el-form-item size="medium" prop="code">
          <el-input  type="text" auto-complete="false" v-model="loginForm.code" placeholder="点击图片更换验证码" style="width: 245px;margin-right: 5px;"></el-input>
          <img style="display: inline-block;position: absolute" :src="captchaUrl" @click="updateCaptcha">
        </el-form-item>
      </div>
  <el-form-item size="medium"  style="width:100%">
    <el-button type="primary" size="medium"  style="width=100%;background:#505458;border:none" @keyup.enter="onSumbit"  @click="onSumbit">登录</el-button>
  </el-form-item>

</el-form>
</body>
</template>
<script>
export default {
  name: 'loginVue',
  data () {
    return {
      loginForm: {
        userName: '',
        password: '',
        value: '',
        code: ''
      },
      captchaUrl: 'http://localhost:8081/captcha?time=' + new Date(),
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    updateCaptcha () {
      this.captchaUrl = 'http://localhost:8081/captcha?time=' + new Date()
    },
    onSumbit () {
      this.$refs.userFrom.validate((valid) => {
        // 表单校验合法（true）
        if (valid) {
          this.request.post('/user/login', this.loginForm).then(res => {
            if (res.code === '200') {
              sessionStorage.setItem('user', JSON.stringify(res.data.user))
              this.$store.commit('setMenu', res.data.menu)
              // 跳转
              this.$router.replace({ path: '/home/user' })
              this.$message.success(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          this.$message.error('请填写完整得信息')
        }
      })
    }
  }
}

</script>
<style>
#box{
    background-position: center;
    height: 100%;
    width: 100%;
    background-size:cover;
    position: fixed;
    background-image: url("../assets/login.jpg");
}
body{
    margin: 0px;
    padding: 0px;
}
.login{
    border-radius: 15px;
    background-clip: padding-box;
    margin: 100px 100px 0 800px;
    width: 350px;
    padding: 45px 35px 45px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cacac6;
}
.title{
  position:fixed;
}
</style>
